<template>
    <view>
        <!-- 地址 -->
        <navigator url="../../pagesU/address/address?source=1" class="address-section">
            <view class="order-content">
                <text class="yticon icon-shouhuodizhi"></text>
                <view class="cen" v-if="addressData">
                    <view class="top">
                        <text class="name">{{ addressData.name }}</text>
                        <text class="mobile">{{ addressData.phoneNumber }}</text>
                    </view>
                    <text class="address">{{ addressData.detailAddress }} {{ addressData.region }}</text>
                </view>
                <text class="yticon icon-you"></text>
            </view>

            <image
                    class="a-bg"
                    src=""
            ></image>
        </navigator>

        <view class="goods-section">
            <view class="g-header b-b">
                <image class="logo"
                       src="http://yjlive160322.oss-cn-beijing.aliyuncs.com/mall/images/20190807/QQ%E5%9B%BE%E7%89%8720190807191952.jpg"></image>
                <text class="name">mallplus多租户商城</text>
                <text class="name" v-if="groupActivity">团购-{{groupActivity.name}}</text>
            </view>
            <!-- 商品列表 -->
            <view class="g-item" v-for="(item, index) in cartPromotionItemList" :key="index">
                <image :src="item.productPic"></image>
                <view class="right">
                    <text class="title clamp">{{ item.productName }}</text>
                    <text class="spec" v-if="item.productAttr">{{ item.productAttr }}</text>
                    <view class="price-box">
                        <text class="price">￥{{ item.price }}</text>
                        <text class="number">x {{ item.quantity }}</text>
                    </view>
                </view>
            </view>
        </view>

        <!-- 优惠明细 -->
        <view class="yt-list">
            <view class="yt-list-cell b-b" v-if="couponList.length > 0" @click="toggleMask('show')">
                <view class="cell-icon">券</view>
                <text class="cell-tit clamp">优惠券</text>
                <text class="cell-tip active">选择优惠券</text>
                <text class="cell-more wanjia wanjia-gengduo-d"></text>
            </view>
            <view class="yt-list-cell b-b" v-if="coupon">
                <text class="cell-tit clamp">商家促销</text>
                <view class="cell-tip hb" v-if="coupon.minPoint">满{{coupon.minPoint}}减{{coupon.amount}}</view>
                <text class="cell-tip disabled" v-if="!coupon">暂无可用优惠</text>
            </view>
        </view>
        <!-- 金额明细 -->
        <view class="yt-list">
            <view class="yt-list-cell b-b">
                <text class="cell-tit clamp">商品金额</text>
                <text class="cell-tip">￥{{ calcAmount.totalAmount }}</text>
            </view>
            <view class="yt-list-cell b-b" v-if="groupActivity">
                <text class="cell-tit clamp">活动金额</text>
                <text class="cell-tip">￥{{ groupActivity.price }}</text>
            </view>
            <view class="yt-list-cell b-b">
                <text class="cell-tit clamp">优惠金额</text>
                <text class="cell-tip red">-￥{{ calcAmount.promotionAmount }}</text>
            </view>
            <view class="yt-list-cell b-b">
                <text class="cell-tit clamp">运费</text>
                <text class="cell-tip">{{calcAmount.freightAmount}}</text>
            </view>
            <view class="yt-list-cell desc-cell">
                <text class="cell-tit clamp">备注</text>
                <input class="desc" type="text" v-model="desc" placeholder="请填写备注信息" placeholder-class="placeholder"/>
            </view>
        </view>

        <!-- 底部 -->
        <view class="footer">
            <view class="price-content">
                <text>实付款</text>
                <text class="price-tip">￥</text>
                <text class="price">{{ calcAmount.payAmount-coupon.amount }}</text>
            </view>
            <text class="submit" @click="submit">提交订单</text>
        </view>

        <!-- 优惠券面板 -->
        <view class="mask" :class="maskState === 0 ? 'none' : maskState === 1 ? 'show' : ''" @click="toggleMask">
            <view class="mask-content" @click.stop.prevent="stopPrevent">
                <!-- 优惠券页面，仿mt -->
                <view class="coupon-item" v-if="couponList.length > 0" v-for="(item, index) in couponList" :key="index">
                    <view class="con" @click="selectCoupon(item)">
                        <view class="left">
                            <text class="title">{{ item.name }}</text>
                            <text class="time">有效期至{{item.coupon.endTime | formatCreateTime}}</text>
                        </view>
                        <view class="right">
                            <text class="price">{{ item.coupon.amount }}</text>
                            <text>满{{item.coupon.minPoint}}可用</text>
                        </view>

                        <view class="circle l"></view>
                        <view class="circle r"></view>
                    </view>
                    <text class="tips">限新用户使用</text>
                </view>
            </view>
        </view>

    </view>
</template>

<script>
    import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
import Api from '@/common/api';
    import {mapState} from 'vuex';

    export default {
    components: {
    		mallplusCopyright
    	},
        data() {
            return {
                maskState: 0, //优惠券面板显示状态
                desc: '', //备注
                payType: 1, //1微信 2支付宝
                type: 1,
                groupType: '',
                groupActivityId: '',
                goodsId: 0,
                mgId: 1,
                cartId: '',
                cartIds: '',
                addressId: '',
                couponId: '',
                memberCouponId: '',
                coupon: {
                    amount: 0,

                },
                groupActivity: null,
                memberReceiveAddressList: [],
                cartPromotionItemList: [],
                calcAmount: {
                    totalAmount: 0,
                    freightAmount: 0,
                    promotionAmount: 0,
                    payAmount: 0
                },
                couponList: [],
                addressData: {
                    name: null,
                    phoneNumber: '',
                    detailAddress: '',
                    region: ''
                }
            };
        },
        async onLoad(option) {
            let data;
            this.type = option.type;
            if (option.groupActivityId) {
                let params = {groupId: option.groupActivityId};
                data = await Api.apiCall('get', Api.order.preGroupActivityOrder, params);
                this.groupActivityId = option.groupActivityId;
                this.groupActivity = data.groupActivity;
            } else {
                if (option.groupType) {
                    this.groupType = option.groupType;
                    this.goodsId = option.id;
                    this.mgId = option.mgid;

                    if (option.skuId) {
                        let params = {
                            groupId: option.groupId,
                            goodsId: option.id,
                            skuId: option.skuId
                        };
                        data = await Api.apiCall('post', Api.order.addGroup, params);
                    } else {
                        let params = {groupId: option.groupId, goodsId: option.id};
                        data = await Api.apiCall('post', Api.order.addGroup, params);
                    }
                } else {
                    if (option.type == 1) {
                        this.cartId = option.id;
                        let params = {cartId: option.id, type: option.type};
                        data = await Api.apiCall('get', Api.order.preOrder, params);
                    } else if (option.type == 2) {
                        let params = {cartIds: option.cartIds, type: option.type};
                        data = await Api.apiCall('get', Api.order.preOrder, params);
                        this.cartIds = option.cartIds;
                    }
                }

            }

            this.cartPromotionItemList = data.cartPromotionItemList;
            this.calcAmount = data.calcAmount;
            this.addressData = data.address;
            if (this.addressData) {
                this.addressId = this.addressData.id;
            }

            this.couponList = data.couponHistoryDetailList;
            this.memberReceiveAddressList = data.memberReceiveAddressListaddress;

        },
        computed: {
            ...mapState([ 'userInfo'])
        },
        methods: {
            selectCoupon(item) {
                this.coupon = item.coupon;
                this.couponId = item.couponId;
                this.memberCouponId = item.id;
                console.log(this.coupon);
                this.toggleMask();
            },
            //显示优惠券面板
            toggleMask(type) {
                let timer = type === 'show' ? 10 : 300;
                let state = type === 'show' ? 1 : 0;
                this.maskState = 2;
                setTimeout(() => {
                    this.maskState = state;
                }, timer);
            },
            numberChange(data) {
                this.number = data.number;
            },
            changePayType(type) {
                this.payType = type;
            },
            async submit() {
                let data;
                if (!this.addressId) {
                    this.$api.msg('请选择收货地址');
                    return;
                }
                // 拼团
                if (this.groupType) {
                    if (!this.mgId) {
                        this.mgId = 1;
                    }

                    let params = {
                        mgId: this.mgId,
                        groupType: this.groupType,
                        type: 1,
                        orderType: 4,
                        goodsId: this.goodsId,
                        addressId: this.addressId,
                        couponId: this.couponId,
                        memberCouponId: this.memberCouponId,

                        content: this.desc
                    };
                    data = await Api.apiCall('post', Api.order.acceptGroup, params);
                } else {
                    // detail
                    if (this.type == 1) {
                        let params = {
                            orderType: 1,
                            type: 1,
                            cartId: this.cartId,
                            addressId: this.addressId,
                            couponId: this.couponId,
                            memberCouponId: this.memberCouponId,
                            content: this.desc
                        };
                        if (this.groupActivityId) {
                            params = {
                                groupActivityId: this.groupActivityId,
                                orderType: 3,
                                type: 1,
                                cartId: this.cartId,
                                addressId: this.addressId,
                                couponId: this.couponId,
                                memberCouponId: this.memberCouponId,

                                content: this.desc
                            };
                        }
                        data = await Api.apiCall('post', Api.order.bookOrder, params);
                    }
                    // 购物车
                    if (this.type == 2) {
                        let params = {
                            orderType: 1,
                            type: 2,
                            cartIds: this.cartIds,
                            addressId: this.addressId,
                            couponId: this.couponId,

                            content: this.desc
                        };
                        data = await Api.apiCall('post', Api.order.bookOrder, params);
                    }
                    // 团购
                    if (this.type == 5) {
                        let params = {
                            type: 2,
                            cartIds: this.cartIds,
                            addressId: this.addressId,
                            couponId: this.couponId,

                            content: this.desc
                        };
                        data = await Api.apiCall('post', Api.order.bookOrder, params);
                    }
                }

                if (data && data.order) {
                    let id = data.order.id;
                    let url = `/pages/money/pay?id=${id}`;

                    uni.navigateTo({
                        url: url
                    });
                } else {
                    this.$api.msg(data);
                }
            },
            stopPrevent() {
            }
        }
    };
</script>

<style lang="scss">
    page {
        background: $page-color-base;
        padding-bottom: 100 upx;
    }

    .address-section {
        padding: 30 upx 0;
        background: #fff;
        position: relative;

        .order-content {
            display: flex;
            align-items: center;
        }

        .icon-shouhuodizhi {
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 90 upx;
            color: #888;
            font-size: 44 upx;
        }

        .cen {
            display: flex;
            flex-direction: column;
            flex: 1;
            font-size: 28 upx;
            color: $font-color-dark;
        }

        .name {
            font-size: 34 upx;
            margin-right: 24 upx;
        }

        .address {
            margin-top: 16 upx;
            margin-right: 20 upx;
            color: $font-color-light;
        }

        .icon-you {
            font-size: 32 upx;
            color: $font-color-light;
            margin-right: 30 upx;
        }

        .a-bg {
            position: absolute;
            left: 0;
            bottom: 0;
            display: block;
            width: 100%;
            height: 5 upx;
        }
    }

    .goods-section {
        margin-top: 16 upx;
        background: #fff;
        padding-bottom: 1px;

        .g-header {
            display: flex;
            align-items: center;
            height: 84 upx;
            padding: 0 30 upx;
            position: relative;
        }

        .logo {
            display: block;
            width: 50 upx;
            height: 50 upx;
            border-radius: 100px;
        }

        .name {
            font-size: 30 upx;
            color: $font-color-base;
            margin-left: 24 upx;
        }

        .g-item {
            display: flex;
            margin: 20 upx 30 upx;

            image {
                flex-shrink: 0;
                display: block;
                width: 140 upx;
                height: 140 upx;
                border-radius: 4 upx;
            }

            .right {
                flex: 1;
                padding-left: 24 upx;
                overflow: hidden;
            }

            .title {
                font-size: 30 upx;
                color: $font-color-dark;
            }

            .spec {
                font-size: 26 upx;
                color: $font-color-light;
            }

            .price-box {
                display: flex;
                align-items: center;
                font-size: 32 upx;
                color: $font-color-dark;
                padding-top: 10 upx;

                .price {
                    margin-bottom: 4 upx;
                }

                .number {
                    font-size: 26 upx;
                    color: $font-color-base;
                    margin-left: 20 upx;
                }
            }

            .step-box {
                position: relative;
            }
        }
    }

    .yt-list {
        margin-top: 16 upx;
        background: #fff;
    }

    .yt-list-cell {
        display: flex;
        align-items: center;
        padding: 10 upx 30 upx 10 upx 40 upx;
        line-height: 70 upx;
        position: relative;

        &.cell-hover {
            background: #fafafa;
        }

        &.b-b:after {
            left: 30 upx;
        }

        .cell-icon {
            height: 32 upx;
            width: 32 upx;
            font-size: 22 upx;
            color: #fff;
            text-align: center;
            line-height: 32 upx;
            background: #f85e52;
            border-radius: 4 upx;
            margin-right: 12 upx;

            &.hb {
                background: #ffaa0e;
            }

            &.lpk {
                background: #3ab54a;
            }
        }

        .cell-more {
            align-self: center;
            font-size: 24 upx;
            color: $font-color-light;
            margin-left: 8 upx;
            margin-right: -10upx;
        }

        .cell-tit {
            flex: 1;
            font-size: 26 upx;
            color: $font-color-light;
            margin-right: 10 upx;
        }

        .cell-tip {
            font-size: 26 upx;
            color: $font-color-dark;

            &.disabled {
                color: $font-color-light;
            }

            &.active {
                color: $base-color;
            }

            &.red {
                color: $base-color;
            }
        }

        &.desc-cell {
            .cell-tit {
                max-width: 90 upx;
            }
        }

        .desc {
            flex: 1;
            font-size: $font-base;
            color: $font-color-dark;
        }
    }

    /* 支付列表 */
    .pay-list {
        padding-left: 40 upx;
        margin-top: 16 upx;
        background: #fff;

        .pay-item {
            display: flex;
            align-items: center;
            padding-right: 20 upx;
            line-height: 1;
            height: 110 upx;
            position: relative;
        }

        .icon-weixinzhifu {
            width: 80 upx;
            font-size: 40 upx;
            color: #6bcc03;
        }

        .icon-alipay {
            width: 80 upx;
            font-size: 40 upx;
            color: #06b4fd;
        }

        .icon-xuanzhong2 {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 60 upx;
            height: 60 upx;
            font-size: 40 upx;
            color: $base-color;
        }

        .tit {
            font-size: 32 upx;
            color: $font-color-dark;
            flex: 1;
        }
    }

    .footer {
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 995;
        display: flex;
        align-items: center;
        width: 100%;
        height: 90 upx;
        justify-content: space-between;
        font-size: 30 upx;
        background-color: #fff;
        z-index: 998;
        color: $font-color-base;
        box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);

        .price-content {
            padding-left: 30 upx;
        }

        .price-tip {
            color: $base-color;
            margin-left: 8 upx;
        }

        .price {
            font-size: 36 upx;
            color: $base-color;
        }

        .submit {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 280 upx;
            height: 100%;
            color: #fff;
            font-size: 32 upx;
            background-color: $base-color;
        }
    }

    /* 优惠券面板 */
    .mask {
        display: flex;
        align-items: flex-end;
        position: fixed;
        left: 0;
        top: var(--window-top);
        bottom: 0;
        width: 100%;
        background: rgba(0, 0, 0, 0);
        z-index: 9995;
        transition: 0.3s;

        .mask-content {
            width: 100%;
            min-height: 30vh;
            max-height: 70vh;
            background: #f3f3f3;
            transform: translateY(100%);
            transition: 0.3s;
            overflow-y: scroll;
        }

        &.none {
            display: none;
        }

        &.show {
            background: rgba(0, 0, 0, 0.4);

            .mask-content {
                transform: translateY(0);
            }
        }
    }

    /* 优惠券列表 */
    .coupon-item {
        display: flex;
        flex-direction: column;
        margin: 20 upx 24 upx;
        background: #fff;

        .con {
            display: flex;
            align-items: center;
            position: relative;
            height: 120 upx;
            padding: 0 30 upx;

            &:after {
                position: absolute;
                left: 0;
                bottom: 0;
                content: '';
                width: 100%;
                height: 0;
                border-bottom: 1px dashed #f3f3f3;
                transform: scaleY(50%);
            }
        }

        .left {
            display: flex;
            flex-direction: column;
            justify-content: center;
            flex: 1;
            overflow: hidden;
            height: 100 upx;
        }

        .title {
            font-size: 32 upx;
            color: $font-color-dark;
            margin-bottom: 10 upx;
        }

        .time {
            font-size: 24 upx;
            color: $font-color-light;
        }

        .right {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            font-size: 26 upx;
            color: $font-color-base;
            height: 100 upx;
        }

        .price {
            font-size: 44 upx;
            color: $base-color;

            &:before {
                content: '￥';
                font-size: 34 upx;
            }
        }

        .tips {
            font-size: 24 upx;
            color: $font-color-light;
            line-height: 60 upx;
            padding-left: 30 upx;
        }

        .circle {
            position: absolute;
            left: -6upx;
            bottom: -10upx;
            z-index: 10;
            width: 20 upx;
            height: 20 upx;
            background: #f3f3f3;
            border-radius: 100px;

            &.r {
                left: auto;
                right: -6upx;
            }
        }
    }
</style>
